// 获取元素
        // 单位网格间隙(px)
        var girdPxSet = document.querySelector('.girdPxSet');
        var btnPxSet = document.querySelector('.btnPxSet');

        // 单位网格大小(m)
        var girdSizeSet = document.querySelector('.girdSizeSet');
        var btnSizeSet = document.querySelector('.btnSizeSet');

        // 游标操作
        var btnCursor = document.querySelector('.btnCursor');
        var btnCursorCancel = document.querySelector('.btnCursorCancel');
        var btnCursorClear = document.querySelector('.btnCursorClear');

        // 数据展示
        var btnAxis = document.querySelector('.btnAxis');
        var btnClear = document.querySelector('.btnClear');
        var data = document.querySelectorAll('.data');

        // 获取画布画笔
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');


        // 基础样式
        ctx.font = '15px 宋体'
        ctx.lineWidth = 0.8;

        // 设置网格间隙、大小
        var girdPx = 10;
        var girdSize = 0.5;

        // 获取Canvas的width、height
        var CanvasWidth = ctx.canvas.width;
        var CanvasHeight = ctx.canvas.height;

        // 声明绘画的x轴条数、y轴的条数
        var xLineTotals = 0;
        var yLineTotals = 0;

        // 控制阀门只能点击一次
        var flag1 = true;
        var flag2 = true;

        // 原点
        var x0 = 0;
        var y0 = 0;

        // 控制间隔显示坐标值
        var interval = 4;

        function gridding() {
            // 画网格之前先清屏
            ctx.clearRect(0, 0, 1000, 700);

            // 改变间隙，计算
            xLineTotals = Math.floor(CanvasHeight / girdPx);
            yLineTotals = Math.floor(CanvasWidth / girdPx);

            // 采用遍历的方式，绘画x轴的线条
            for (var i = 0; i < xLineTotals; i++) {
                ctx.beginPath(); // 开启路径，设置不同的样式
                ctx.moveTo(0, girdPx * i - 0.5); // -0.5是为了解决像素模糊问题
                ctx.lineTo(CanvasWidth, girdPx * i - 0.5);
                ctx.strokeStyle = "#ccc"; // 设置每个线条的颜色
                ctx.stroke();
            }
            // 采用遍历的方式，绘画y轴的线条            
            for (var j = 0; j < yLineTotals; j++) {
                ctx.beginPath(); // 开启路径，设置不同的样式
                ctx.moveTo(girdPx * j - 0.5, 0);
                ctx.lineTo(girdPx * j - 0.5, CanvasHeight);
                ctx.strokeStyle = "#ccc"; // 设置每个线条的颜色
                ctx.stroke();
            }
        }
        gridding();

        // 放置坐标轴
        btnAxis.addEventListener('click', function (e) {

            // 只能点击一次（清除画布解除禁用）
            this.disabled = true;
            canvas.style.cursor = 'crosshair';

            canvas.addEventListener('click', function (e) {
                this.style.cursor = 'default';

                if (flag1) {
                    flag1 = false;

                    // 判断断点
                    if (10 <= girdPx && girdPx < 15) {
                        interval = 4;
                    } else if (15 <= girdPx && girdPx < 25) {
                        interval = 3;
                    } else if (25 <= girdPx && girdPx < 35) {
                        interval = 2;
                    } else {
                        interval = 1;
                    }

                    // 设置原点 通过“Math.round()”方法返回一个数字四舍五入后的整数部分;
                    x0 = Math.round(e.offsetX / girdPx) * girdPx;
                    y0 = Math.round(e.offsetY / girdPx) * girdPx;
                    console.log(e.offsetX, e.offsetY);
                    console.log(x0, y0);

                    // 定制原点
                    ctx.fillStyle = '#cc0000';
                    ctx.beginPath();
                    ctx.arc(x0, y0, 3, 0, 7, false)
                    ctx.fill();
                    // 更新数据
                    data[3].innerHTML = `(${x0},${y0})`;

                    // 定制坐标线 x, y
                    // 1、x线上坐标断点
                    ctx.beginPath();
                    ctx.moveTo(x0, 0)
                    ctx.lineTo(x0, CanvasHeight)
                    ctx.strokeStyle = "#cc0000";
                    ctx.stroke();
                    // 计算x0左、右边需绘制的线
                    x0LeftLines = x0 / girdPx;
                    x0RightLines = yLineTotals - x0LeftLines;
                    // console.log(x0LeftLines, y0LeftLines);
                    // 从零开始向左右画
                    for (var i = 0; i < x0LeftLines; i++) {
                        ctx.beginPath(); // 开启路径，设置不同的样式
                        // 判断，使原点坐标不显示（0,0）,和隔interval隔显示坐标数
                        if (i % interval == 0 && i != 0) {
                            ctx.moveTo(x0 - girdPx * i - 0.5, y0 - 10); // -0.5是为了解决像素模糊问题
                            ctx.lineTo(x0 - girdPx * i - 0.5, y0 + 10);
                            ctx.strokeStyle = "#cc0000"; // 设置每个线条的颜色
                            // 显示坐标
                            ctx.font = '600 10px 宋体';
                            ctx.textAlign = 'center';
                            if (y0 >= CanvasHeight - 50) {
                                ctx.fillText(`-${girdSize * i}`, x0 - girdPx * i, y0 - 21)
                            } else {
                                ctx.fillText(`-${girdSize * i}`, x0 - girdPx * i, y0 + 21)
                            }
                        } else {
                            ctx.moveTo(x0 - girdPx * i - 0.5, y0 - 5); // -0.5是为了解决像素模糊问题
                            ctx.lineTo(x0 - girdPx * i - 0.5, y0 + 5);
                            ctx.strokeStyle = "#cc0000"; // 设置每个线条的颜色
                        }
                        ctx.stroke();
                    }
                    for (var i = 0; i < x0RightLines; i++) {
                        ctx.beginPath(); // 开启路径，设置不同的样式
                        if (i % interval == 0 && i != 0) {
                            ctx.moveTo(x0 + girdPx * i - 0.5, y0 - 10); // -0.5是为了解决像素模糊问题
                            ctx.lineTo(x0 + girdPx * i - 0.5, y0 + 10);
                            ctx.strokeStyle = "#cc0000"; // 设置每个线条的颜色
                            // 显示坐标
                            ctx.font = '600 10px 宋体';
                            ctx.textAlign = 'center';
                            if (y0 >= CanvasHeight - 50) {
                                ctx.fillText(`-${girdSize * i}`, x0 + girdPx * i, y0 - 21)
                            } else {
                                ctx.fillText(`-${girdSize * i}`, x0 + girdPx * i, y0 + 21)
                            }
                        } else {
                            ctx.moveTo(x0 + girdPx * i - 0.5, y0 - 5); // -0.5是为了解决像素模糊问题
                            ctx.lineTo(x0 + girdPx * i - 0.5, y0 + 5);
                            ctx.strokeStyle = "#cc0000"; // 设置每个线条的颜色
                        }
                        ctx.stroke();
                    }

                    // 2、y线上坐标断点
                    ctx.beginPath();
                    ctx.moveTo(0, y0)
                    ctx.lineTo(CanvasWidth, y0)
                    ctx.strokeStyle = "#cc0000";
                    ctx.stroke();
                    // 计算y0上、下需绘制的线
                    y0TopLines = y0 / girdPx;
                    y0BottomLines = xLineTotals - y0TopLines;
                    // console.log(y0TopLines, y0BottomLines);
                    // 从零开始向上下画
                    for (var i = 0; i < y0TopLines; i++) {
                        ctx.beginPath(); // 开启路径，设置不同的样式
                        // 判断，使原点坐标不显示（0,0）,和隔interval隔显示坐标数
                        if (i % interval == 0 && i != 0) {
                            ctx.moveTo(x0 - 10, y0 - girdPx * i - 0.5);
                            ctx.lineTo(x0 + 10, y0 - girdPx * i - 0.5);
                            ctx.strokeStyle = "#cc0000"; // 设置每个线条的颜色
                            // 显示坐标
                            ctx.font = '600 10px 宋体';
                            ctx.textAlign = 'center';
                            if (x0 <= 50) {
                                ctx.fillText(`${girdSize * i}`, x0 + 21, y0 - girdPx * i - 0.5)
                            } else {
                                ctx.fillText(`${girdSize * i}`, x0 - 21, y0 - girdPx * i - 0.5)
                            }
                        } else {
                            ctx.moveTo(x0 - 5, y0 - girdPx * i - 0.5);
                            ctx.lineTo(x0 + 5, y0 - girdPx * i - 0.5);
                            ctx.strokeStyle = "#cc0000"; // 设置每个线条的颜色
                        }
                        ctx.stroke();
                    }
                    for (var i = 0; i < y0BottomLines; i++) {
                        ctx.beginPath(); // 开启路径，设置不同的样式
                        // 判断，使原点坐标不显示（0,0）,和隔interval隔显示坐标数
                        if (i % interval == 0 && i != 0) {
                            ctx.moveTo(x0 - 10, y0 + girdPx * i - 0.5);
                            ctx.lineTo(x0 + 10, y0 + girdPx * i - 0.5);
                            ctx.strokeStyle = "#cc0000"; // 设置每个线条的颜色
                            // 显示坐标
                            ctx.font = '600 10px 宋体';
                            ctx.textAlign = 'center';
                            if (x0 <= 50) {
                                ctx.fillText(`${girdSize * i}`, x0 + 21, y0 + girdPx * i - 0.5)
                            } else {
                                ctx.fillText(`${girdSize * i}`, x0 - 21, y0 + girdPx * i - 0.5)
                            }
                        } else {
                            ctx.moveTo(x0 - 5, y0 + girdPx * i - 0.5);
                            ctx.lineTo(x0 + 5, y0 + girdPx * i - 0.5);
                            ctx.strokeStyle = "#cc0000"; // 设置每个线条的颜色
                        }
                        ctx.stroke();
                    }
                }
            });

            // 开启游标
            btnCursor.addEventListener('click', function () {
                canvas.style.cursor = 'crosshair';

                canvas.addEventListener("mousemove", function (e) {
                    console.log(x0, y0);


                    canvas.addEventListener('click', function () {
                        // console.log(x0, y0);
                        // ctx.font = '600 13px 宋体';
                        // ctx.textAlign = 'center';
                        // if (x0 <= 50) {
                        //     ctx.fillText(`(${1}, ${1})`, x0 + 21, y0 + girdPx * i - 0.5)
                        // } else {
                        //     ctx.fillText(`(${1}, ${1})`, x0 - 21, y0 + girdPx * i - 0.5)
                        // }
                    })
                })
            })

        });

        // 清除画布所有内容
        btnClear.addEventListener('click', function () {
            // 清空后，更新回最之前的大小间隙
            girdPx = 10;
            girdSize = 0.5;
            // 显示在输入框
            girdPxSet.value = 10;
            girdSizeSet.value = 0.5;
            // 数据显示
            data[2].innerHTML = `${girdSizeSet.value}`;
            gridding();

            // 解除按钮的禁用
            btnAxis.disabled = false;

            // 解除点击控制
            flag1 = true;
            flag2 = true;
        })

        // 画布控制网格间隙加载数据
        btnPxSet.addEventListener('click', function () {
            // console.log(girdPxSet.value);

            if (girdPxSet.value < 10) {
                girdPxSet.value = 10;
            }
            // 设置网格间隙
            girdPx = girdPxSet.value;

            gridding();
            // 解除点击控制
            flag1 = true;
            flag2 = true;

            // 显示
            data[1].innerHTML = `${yLineTotals * girdSize} * ${xLineTotals * girdSize}`;
        })

        // 画布控制网格大小加载数据
        btnSizeSet.addEventListener('click', function () {
            // console.log(girdSizeSet.value);

            if (girdSizeSet.value < 0.5) {
                girdSizeSet.value = 0.5;
            }

            // 设置网格大小
            girdSize = girdSizeSet.value;
            gridding();

            // 解除点击控制
            flag1 = true;
            flag2 = true;

            // 显示
            data[1].innerHTML = `${yLineTotals * girdSize} * ${xLineTotals * girdSize}`;
            data[2].innerHTML = `${girdSizeSet.value}`;
        })